<template>
  <div class="about">
    <el-header>
      <div class="main-NAV">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>机油保养邀约</el-breadcrumb-item>
          <el-breadcrumb-item>学习与考试</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </el-header>
    <div class="titleBar">请按顺序依次完成课程！</div>
    <div class="table">
      <div class="table-tr thead">
        <div class="table-th">顺序</div>
        <div class="table-th">内容</div>
        <div class="table-th">预计时长</div>
        <div class="table-th">详细描述</div>
        <div class="table-th">操作</div>
      </div>
      <div class="table-tr tbody">
        <div class="table-th">步骤一</div>
        <div class="table-th">悦学苑APP线上学习课程</div>
        <div class="table-th">2h</div>
        <div class="table-th">· 线上课程分为X部分，共计X个课程，请认真学习全部 课程。</div>
        <div class="table-th"></div>
      </div>
      <div class="table-tr tbody">
        <div class="table-th">步骤二</div>
        <div class="table-th">系统文字对练</div>
        <div class="table-th">1.5h</div>
        <div class="table-th">
          · 文字对练分共有X部分，请完成所有内容的对练。
          <br />
          · 该对练由机器提问，请针对提问使用标准话术以文字 形式作答。
          <br />
          · 对练次数：不限。
        </div>
        <div class="table-th">
          <div class="buttonContent">
            <div class="bg999">部分1</div>
            <div class="bg999">部分2</div>
          </div>
        </div>
      </div>
      <div class="table-tr tbody">
        <div class="table-th">步骤三</div>
        <div class="table-th">系统沟通对练</div>
        <div class="table-th">0.5h</div>
        <div class="table-th">
          · 系统沟通对练共有X个场景，请完成所有场景的对练。
          <br />
          · 该对练由机器提问，请针对提问使用标准话术以语音 的形式作答；同时请注意语速与表情。
          <br />
          · 对练次数：每个场景最多可对练X次。
        </div>
        <div class="table-th">
          <div class="buttonContent">
            <div @click="TouserInfo">场景1</div>
            <div class="bg999">场景2</div>
            <div class="bg999">场景3</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'about',
  data() {
    return {};
  },
  methods: {
    TouserInfo() {
      this.$router.push({ name: 'UserInfoTwo' });
    },
  },
  computed: {},
};
</script>
<style lang="less" scoped>
.titleBar {
  height: 25px;
  background: #ffecef;
  font-size: 14px;
  line-height: 25px;
  color: #9e0018;
  text-align: center;
}
.bg999 {
  background-color: #999 !important;
}

.table,
.table * {
  margin: 0 auto;
  padding: 0;
  font-size: 14px;
  margin-top: 8px;
}
.table {
  display: table;
  width: 100%;
  border-collapse: collapse;
}
.thead {
  height: 35px;
  background: #f4f4f4;
  border: 1px solid #dcdcdd;
}
.table-tr {
  display: table-row;
}
.table-th {
  display: table-cell;
  height: 100%;
  border: 1px solid #dcdcdd;
  text-align: center;
  vertical-align: middle;
}
.table-td {
  display: table-cell;
  height: 100%;
  border: 1px solid gray;
  text-align: center;
  vertical-align: middle;
}
.tbody .table-th {
  padding: 30px 20px;
  color: #303030;
  font-size: 16px;
  line-height: 21px;
}
.tbody .table-th:nth-of-type(4) {
  text-align: left;
}

.buttonContent div {
  background: #9e0018;
  border-radius: 5px;
  font-size: 16px;
  box-sizing: border-box;
  padding: 5px 26px;
  color: #ffffff;
  cursor: pointer;
}
.main-NAV /deep/ .el-breadcrumb__item {
  background-color: #f2f2f2 !important;
  color: #303030 !important;
  font-size: 16px !important;
  &:last-of-type .el-breadcrumb__inner {
    color: #9e0018 !important;
  }
}
</style>
